@extends('admin::layouts.master')
@section('content')
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/base/base_reply" class="nav-link">基础回复列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加基础回复</a></li>
        </ul>
        <form action="/base/base_reply" method="post">
            {!! $views !!}
            <div class="card"  id="content" style="overflow: hidden;">

                @csrf
                <div class="form-group row" v-for="(v,k) in contents" style="background:white;">
    <label for="content" class="col-12 col-sm-3 col-form-label text-md-right">回复内容@{{ k+1 }}</label>
    <div class="col-12 col-md-9 input-group">
        <textarea class="neirong clearfix" required v-model="v.content" cols="80" rows="2"></textarea>
        <div class="input-group-append">
            <div class="icon-container p-0 ml-2 sub">
                <div class="icon"><span class="mdi mdi-minus" @click="del(k)"></span></div>
                {{--<span>删除</span>--}}
            </div>
            <div class="icon-container p-0 ml-2 face">
                <div class="icon"><span class="mdi mdi-github-alt"></span></div>
                {{--<span>表情</span>--}}
            </div>
        </div>
        <div>
        </div>
    </div>
</div>


                <textarea hidden name="content" id="" cols="30" rows="10">@{{contents}}</textarea>
            <div class="from-group row">
                <label for="" class="col-12 col-sm-3 col-form-label text-md-right"></label>
                <div class="col-sm-8">
                    <button @click="add()" type="button" class="btn btn-secondary mt-2 mb-2">添加回复内容</button>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
            </div>
        </form>

@endsection
@section('scripts')
    <script>
        require(['vue','hdjs'],function(vue,hdjs){
            new vue({
                el:'#content',
                data:{
                    contents:[{content:''}]
                },
                methods:{
                    add(){
                        this.contents.push({content:''})
                    },
                    del(k){
                        this.contents.splice(k,1);
                    },
                    emotion(){
                            var This=this;
                            $('.neirong').each(function(){
                                console.log($(this));
                                hdjs.emotion({
                                    btn: $(this).next().find('.face'),
                                    input: $(this),
                                    callback: function (con, btn, input) {
                                        var index = $(input).index('#content textarea');
                                        This.contents[index].content = $(input).val();
                                    }
                                });

                            });

                    }
                },
                mounted(){
                    this.emotion();
                },
                updated(){
                    this.emotion();
                }
            })
        })
    </script>
@endsection
